<template>
  <div class="sideMenu">
    <el-menu mode="horizontal" background-color="#1e293b" text-color="#e2e8f0" class="customMenu"
      v-for="(item, index) in sideName" :key="index">
      <el-menu-item @click="clickItem(item)" :index="item.index">{{ item.content }}</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
interface Sildename {
  content: string,
  name: string,
  path: string,
  index: string
}
const sideName = reactive<Sildename[]>([
  { content: '首页', name: 'zhuye', path: '/zhuye', index: '0' },
  { content: '关于', name: 'guanyu', path: '/guanyu', index: '1' },
  { content: '新闻', name: 'xinwen', path: '/xinwen', index: '2' },
  { content: '单文件上传', name: 'danwj', path: '/danwj', index: '3' },
  { content: '多文件上传', name: 'duowj', path: '/duowj', index: '4' },
  { content: '大文件上传', name: 'dawj', path: '/dawj', index: '5' },
])
function clickItem(item: Sildename): void {
  router.push({ path: item.path })
}

</script>

<style scoped lang='scss'>
.sideMenu {
  height: 100%;

  .customMenu {
    height: 150px;
    --el-menu-horizontal-height: 80px;
    border-bottom: none;

    .el-sub-menu__title:hover {
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.2));
    }
  }
}
</style>